<!--
 * @Author: Shususumu
 * @Date: 2020-10-15 15:57:45
 * @LastEditTime: 2020-10-20 14:28:37
 * @FilePath: \campusPTjobs\src\views\customer\index.vue
-->
<template>
  <div id="customer">
    <!-- 控件 -->
    <div id="control">
      <el-button
        type="primary"
        size="small"
        @click="(dialogFormVisible = true), addmsg()"
        >添加</el-button
      >
      <el-input
        placeholder="请输入查询的内容"
        v-model="input"
        class="input"
        clearable
        size="small"
      >
      </el-input>
      <el-button type="primary" size="small" @click="search()">查询</el-button>
    </div>
    <!-- 表格 -->
    <template>
      <el-table :data="customers" stripe style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80">
        </el-table-column>
        <el-table-column fixed prop="realname" label="姓名"> </el-table-column>
        <el-table-column prop="telephone" label="手机号"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="dlt(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button
              @click="(dialogFormVisible = true), udt(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button @click="details(scope.row)" type="text" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6, 8, 10, 12]"
      :page-size="6"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="waiterform">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="form.username"
            autocomplete="off"
            clearable
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input
            v-model="form.realname"
            autocomplete="off"
            clearable
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model.number="form.telephone"
            autocomplete="off"
            clearable
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
            clearable
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-select v-model="form.status" placeholder="请选择" size="small">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), saveOrUpdate('waiterform')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qs from "querystring";
export default {
  data() {
    return {
      customers: [],
      input: "",
      dialogFormVisible: false,
      title: "修改商品信息",
      form: {
        username: "",
        realname: "",
        telephone: "",
        password: "",
        status: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        price: [
          { required: true, message: "价格不能为空" },
          { type: "number", message: "价格必须为数字值" },
        ],
        categoryId: [
          { required: true, message: "请选择所属栏目", trigger: "change" },
        ],
      },
      formLabelWidth: "100px",
      fileList: [],
      currentPage: 1,
      total: 1,
      pageSize: 6,
    };
  },
  methods: {
    // 全局封装分页查询
    findquery(name) {
      if (name) {
        var pageobj = {
          page: this.currentPage - 1,
          pageSize: this.pageSize,
          realname: name,
        };
      } else {
        var pageobj = { page: this.currentPage - 1, pageSize: this.pageSize };
      }
      pageobj = qs.stringify(pageobj);
      // console.log(pageobj);
      this.$axios.post("/customer/query", pageobj).then((res) => {
        // console.log(res);
        this.customers = res.data.data.list;
        this.total = res.data.data.total;
      });
      // this.$axios.get("/customer/findAll").then((res) => {
      //   console.log(res);
      // });
    },
    //封装栏目查询
    findcategory() {
      return this.$axios.get("/category/findAll");
    },
    //查询
    search() {
      if (this.input) {
        this.findquery(this.input);
      } else {
        this.findquery();
      }
    },
    //删除
    dlt(row) {
      var id = row.id;
      this.$confirm("此操作将永久删除该产品, 是否继续?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("customer/deleteById", { params: { id } })
            .then((res) => {
              // console.log(res.data);
              if (res.data.status == 200) {
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.findquery();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败,绑定了其他数据",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //详情功能
    details(msg) {
      this.$router.push({
        path: "/customer_details/index",
        query: { msg: msg },
      });
    },
    //图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findquery();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findquery();
    },
    //编辑按钮功能
    udt(row) {
      // console.log(row);
      this.title = "修改顾客信息";
      this.form = {
        id: row.id,
        username: row.username,
        realname: row.realname,
        telephone: row.telephone,
        password: row.password,
        type: row.type,
        registerTime: row.registerTime,
        status: row.status,
      };
    },
    //新增按钮功能
    addmsg() {
      this.title = "新增顾客信息";
      this.form = {};
    },
    //提交按钮功能
    saveOrUpdate(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //表单验证成功-获取用户输入-》发送保存请求
          self.$axios
            .post("/customer/saveOrUpdate", qs.stringify(self.form))
            .then((res) => {
              if (res.data.status == 200) {
                //保存成功
                //1.关闭模态框

                //2.刷新页面
                self.findquery();
                //3.提示用户保存成功-弹框
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
              } else {
                //保存失败
                this.$message.error("保存失败");
              }
            });
        } else {
          //表单验证失败
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.findquery();
  },
};
</script>
<style lang="scss" scoped>
#customer {
  margin: 18px;
}
.el-input {
  width: 200px;
  margin-left: 20px;
}
</style>